<template>
  <div class="details">
    <header>
      <i class="iconfont icon-xiangzuo1" @click="$router.go(-1)"></i>
      <i class="iconfont icon-fenxiang"></i>
    </header>
    <van-tabs v-model="active" scrollspy sticky>
      <van-tab title="商品" class="merchandise">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          @change="onChange"
        >
          <van-swipe-item v-for="(item, index) of rotation" :key="index">
            <van-image lazy-load :src="'https:' + item.img_url_webp" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }}/{{ rotation.length }}
            </div>
          </template>
        </van-swipe>
        <div class="product_price">
          <div class="layout">
            <div class="cur-price">￥{{ goodsInfo.market_price }}</div>
          </div>
          <div class="coupon-active">
            <div
              class="customize"
              style="padding: 0.19rem 0rem 0.09rem 0.12rem"
            >
              <div class="overview-promotion-left">
                <div class="cur-active">
                  <div class="act-title">下单减100</div>
                </div>
                <div class="cur-active">
                  <div class="act-title">赠品</div>
                </div>
                <div class="cur-active">
                  <div class="act-title">预计得260米金</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="border-bottom: 0.2rem solid rgb(246, 246, 246)"></div>
        <div class="name">{{ productInfo.name }}</div>
        <div class="section">
          <div class="brief">
            <div class="goods-brief">
              {{ productInfo.product_desc_ext }}
            </div>
          </div>
          <div class="point">
            <div
              class="desc"
              v-for="(item, index) of productInfo.sell_point_desc"
              :key="index"
            >
              <span>{{ item }}</span>
            </div>
          </div>
        </div>
        <div class="configuration">
          <div
            class="item"
            v-for="(item, index) of goodsInfo.class_parameters.list"
            :key="index"
            v-show="item.top_title"
          >
            <div v-if="item.icon">
              <img
                :src="item.icon"
              />
              <div class="item_name">{{item.top_title}}</div>
              <div class="item_value">{{ item.value }}</div>
            </div>
          </div>
        </div>
        <div style="border-bottom: 0.2rem solid rgb(246, 246, 246)"></div>
        <div class="choice_section">
          <div class="choice_more" @click="show = true">
            <div class="customize">
              <div class="title">已选</div>
              <div class="flex">
                <div class="info">
                  <div class="display-flex">
                    <div class="pro-name">{{ goodsInfo.name }}</div>
                    <div>x {{ numValue }}</div>
                    <i class="iconfont icon-xiangyou1"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="choice_more">
            <div class="customize">
              <div class="title">送至</div>
              <div class="flex">
                <div class="info display-flex">
                  <img
                    src=""
                    class="location-icon"
                  /><span class="mr1x">北京市 东城区</span
                  ><span class="on"> 有现货</span>
                  <i class="iconfont icon-xiangyou1"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="border-bottom: 0.2rem solid rgb(246, 246, 246)"></div>
      </van-tab>
      <van-tab title="评价" class="details__appraise">
        <div class="comments">
          <div class="comments_title">
            <div class="comments_title_left">用户评价</div>
            <div class="comments_title_right">
              {{comments.detail.satisfy_per}}
              <i class="iconfont icon-xiangyou1"></i>
            </div>
          </div>
          <div class="comments_tags">
            <span class="comments_tags_text" v-for="item of comments.detail.comment_tags" :key="item.profile_id">{{item.tag_name}}</span>
          </div>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item of comments.list" :key="item.user_id">
                <div class="swiper_box">
                  <div class="comment_header">
                    <div class="img_box">
                      <img
                        :src="item.user_avatar"
                      />
                    </div>
                    <div class="user_info">
                      <p class="name">{{item.user_name}}</p>
                      <p class="comment_date">{{item.add_time}}</p>
                    </div>
                  </div>
                  <div class="comment_content">
                    <div class="text">
                      {{item.comment_content}}
                    </div>
                    <div class="photos">
                      <div class="img" v-for="info,index of item.image_infos" :key="index">
                        <img
                          :src="info.img_url"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="详情" class="detailsItems">
        <van-tabs v-model="detailsActive" sticky title-active-color="#ff5934">
          <van-tab
            v-for="(item, index) in detailsItems"
            :title="item.tab_name"
            :key="index"
          >
            <van-image
              lazy-load
              :src="info.body.img_url_webp"
              v-for="info of item.page_info"
              :key="info.block_id"
            />
          </van-tab>
        </van-tabs>
      </van-tab>
      <van-tab title="推荐" class="details_recommend">
        <div style="border-bottom: 0.2rem solid rgb(246, 246, 246)"></div>
        <div class="head_mark">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
            alt=""
          />
        </div>
        <div class="recommend_lists">
          <div
            class="recommend_list"
            v-for="(item, index) of recommend"
            :key="index"
          >
            <div class="list_img">
              <img :src="'https:' + item.image_url" />
            </div>
            <div class="list_info">
              <div class="list_name">{{ item.name }}</div>
              <div class="list_price price">
                ￥{{ item.price
                }}<del class="price" v-if="item.market_price !== item.price"
                  >￥{{ item.market_price }}</del
                >
              </div>
            </div>
          </div>
        </div>
        <div style="height: 50px"></div>
      </van-tab>
    </van-tabs>
    <van-goods-action>
      <van-goods-action-icon icon-class='iconfont icon-shouye' text="首页" @click="$router.push('/Home')"/>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="items.length" @click="$router.push('/ShoppingCart').catch(()=>{})"/>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="show = true"
      />
      <van-goods-action-button  @click="show = true" type="danger" text="立即购买" />
    </van-goods-action>
    <van-popup v-model="show" position="bottom" :style="{ height: '77%' }">
      <div class="pop-product">
        <i class="iconfont icon-guanbi2" @click="show = false"></i>
        <div class="pro_info">
          <div class="product_img">
            <img
              :src="'https:'+goodsInfo.img_url"
            />
          </div>
          <div class="product_desc">
            <div class="product_price">
              <div class="price">￥{{ goodsInfo.market_price }}</div>
            </div>
            <div class="name">{{ goodsInfo.name }}</div>
          </div>
        </div>
        <div class="scroll">
          <div
            class="info"
            v-for="(item, index1) of buyOption"
            :key="item.prop_cfg_id"
          >
            <div v-if="item.name !== '通用'">
              <div class="option-title">{{ item.name }}</div>
              <div class="options-group">
                <div
                  :class="[
                    'option-item',
                    { active: Indexes[index1] == index2 },
                  ]"
                  v-for="(option, index2) of item.list"
                  :key="option.prop_value_id"
                  @click="
                    Indexes[index1] !== index2
                      ? Indexes.splice(index1, 1, index2)
                      : null
                  "
                >
                  <p>{{ option.name }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="num">
            <p>购买数量</p>
            <van-stepper v-model="numValue" disable-input />
          </div>
          <div style="height: 50px"></div>
        </div>
        <div class="btn-bottom">
          <div class="action-box">
            <div class="buy-btn-group">
              <div class="buy-btn" @click="add">确定</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template> 
<script>
import Vue from "vue";
import Swiper from "swiper";
import { details, recommend } from "../assets/js/shuju.js";
import {
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Swipe,
  SwipeItem,
  Image as VanImage,
  Lazyload,
  Tab,
  Tabs,
  Popup,
  Stepper,
  Toast 
} from "vant";
import { mapActions, mapState } from "vuex";
Vue.use(Stepper);
Vue.use(Popup);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Lazyload);
Vue.use(VanImage);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  name: "detail",
  data() {
    return {
      rotation: null, //轮播图图片
      current: 0, //轮播图索引
      active: 0, //导航栏索引
      detailsItems: null, //详情内容
      detailsActive: 0, //详情导航
      recommend: null, //推荐数据
      show: false, //控制显示
      numValue: 1, //数量
      buyOption: null, //选择数据
      Indexes: [0, 0],
      goodsInfo: null, //当前套餐数据
      productInfo: null, //商品信息
      comments:null,//评论信息
    };
  },
  methods: {
    //修改轮播图索引
    onChange(index) {
      this.current = index;
    },
    //加入购物车
    add() { 
      let info = {
        checked: false,
        image_url: this.goodsInfo.image_share,
        market_price: this.goodsInfo.market_price,
        num: this.numValue,
        price: this.goodsInfo.market_price,
        product_id: this.goodsInfo.product_id,
        product_name: this.goodsInfo.name,
        sel_status: 1,
        spec_name: "颜色",
        spec_value: this.goodsInfo.spec_value,
      };
      this.change({
        type: "addItem",
        info,
      });
      this.show=false;
      Toast("已加入购物车")
    },
    ...mapActions({
      change: "change",
    }),
  },
  mounted() {
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        slidesPerView: 1.05, //显示个数
        paginationClickable: true,
        spaceBetween: 5, //div之间间距
        observer: true,
        observeParents: true,
      });
    });
  },
  created() {
    let datas;
    for (let i in details.goods_tpl_datas) {
      datas = details.goods_tpl_datas[i];
    }
    let index =
      datas.sections.findIndex(
        (ele) => ele.components_name == "【单品页】推荐及排行榜"
      ) + 1;
    this.buyOption = details.buy_option;//获取选择数据
    this.detailsItems = datas.sections[index].body.items;//获取详情内容
    this.rotation = details.goods_share_datas.gallery_view;//获取轮播图图片
    this.recommend = recommend;//获取推荐数据
    this.goodsInfo = details.goods_info[0]; //获取当前套餐数据
    this.productInfo = details.product_info;//获取商品信息
    this.comments=details.goods_share_datas.comments;//获取评论信息
  },
  watch: {
    //修改选择信息
    Indexes(newValue) {
      let index = newValue[0] * this.buyOption[0].list.length + newValue[1];
      this.goodsInfo = details.goods_info[index];
      this.numValue = 1;
    },
  },
  computed:{
     ...mapState(["items"]),
  }
};
</script>

<style lang="less">
.details {
  .van-popup {
    border-top-left-radius: 0.24rem;
    border-top-right-radius: 0.24rem;
    .pop-product {
      position: relative;
      padding: 0 0.32rem;
      text-align: left;
      height: 100%;
      .icon-guanbi2 {
        position: absolute;
        font-size: 0.4rem;
        top: 10px;
        right: 0.32rem;
        z-index: 71;
      }
      .pro_info {
        padding: 0.32rem 0 0.2rem;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        position: relative;
        z-index: 70;
        .product_img {
          position: relative;
          width: 1.67rem;
          height: 1.67rem;
          text-align: center;
          background: #fff;
          overflow: hidden;
          border-radius: 0.08rem;
          background: rgba(0, 0, 0, 0.04);
          img {
            width: 1.41rem;
            height: 1.41rem;
            margin: 0.13rem auto;
          }
        }
        .product_desc {
          position: relative;
          width: 4.5rem;
          height: 1.67rem;
          margin: 0 0 0 0.32rem;
          text-align: left;
          .product_price {
            display: flex;
            align-items: baseline;
            margin-top: 0.37rem;
            .price {
              color: #ff5934;
              font-size: 0.36rem;
              font-weight: 900;
              line-height: 1em;
            }
          }
          .name {
            height: 0.64rem;
            line-height: 0.32rem;
            color: #000;
            margin-top: 0.24rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            font-size: 0.22rem;
          }
        }
      }
      .scroll {
        overflow-y: scroll;
        max-height: 6.6rem;
        padding-bottom: 0;
        overflow-x: hidden;
        &::-webkit-scrollbar {
          width: 0;
        }
        .info {
          .option-title {
            display: flex;
            position: relative;
            margin-top: 0.4rem;
            margin-bottom: 0.24rem;
            line-height: 0.24rem;
            font-size: 0.24rem;
            color: #000;
            font-weight: 700;
          }
          .options-group {
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            display: flex;
            flex: 1 1 auto;
            .option-item {
              line-height: 0.24rem;
              min-width: 0.64rem;
              box-sizing: border-box;
              height: 0.54rem;
              padding: 0.15rem 0.24rem;
              text-align: center;
              margin: 0 0.24rem 0.24rem 0;
              overflow: visible;
              border-radius: 0.28rem;
              border: 0.02rem solid transparent;
              background: rgba(0, 0, 0, 0.04);
              font-size: 0.24rem;
            }
            .active {
              color: #f56600;
              border: 0.02rem solid #ff5934;
              border-radius: 0.28rem;
              background: rgba(255, 89, 52, 0.08);
            }
          }
        }
        .num {
          display: flex;
          flex: 1 1 auto;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-between;
          p {
            margin-bottom: 0.4rem;
            margin-top: 0.4rem;
            margin-bottom: 0.24rem;
            line-height: 0.24rem;
            font-size: 0.24rem;
            color: #000;
            font-weight: 700;
          }
        }
      }
      .btn-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        .action-box {
          height: 1.04rem;
          padding: 0.12rem 0.31rem;
          .buy-btn-group {
            display: flex;
            height: 0.72rem;
            border-radius: 0.72rem;
            overflow: hidden;
            .buy-btn {
              height: 0.72rem;
              line-height: 0.72rem;
              color: #fff;
              display: block;
              text-align: center;
              width: 100%;
              font-size: 0.28rem;
              border-radius: 0 !important;
              &:first-child {
                background-image: linear-gradient(
                  90deg,
                  #fdcf00,
                  #fd9b00
                ) !important;
              }
              &:last-child {
                background-image: linear-gradient(
                  90deg,
                  #ff7310,
                  #fe3f00
                ) !important;
              }
            }
          }
        }
      }
    }
  }
  & > .van-tabs {
    position: relative;
    z-index: 80;
    overflow: hidden;
    .van-sticky {
      padding: 0 12%;
      background: #fff;
    }
    .merchandise {
      .choice_section {
        .choice_more {
          overflow: hidden;
          position: relative;
          text-align: left;
          line-height: 0.36rem;
          padding: 0.26rem 0 0 0.32rem !important;
          .customize {
            -webkit-box-pack: start;
            justify-content: flex-start;
            display: flex;
            font-size: 0.24rem !important;
            .title {
              flex: 0 0 0.5rem;
              color: #000;
              margin-right: 0.4rem;
              min-width: 0.5rem;
              font-weight: 500;
            }
            .flex {
              -webkit-box-flex: 1;
              border-bottom: 1px solid rgba(0, 0, 0, 0.05);
              flex: 1 1 auto;
              .icon-xiangyou1 {
                flex: 1;
                text-align: right;
                &::before {
                  padding-right: 14px;
                }
              }
              .display-flex {
                display: flex;
                .pro-name {
                  max-width: 5rem;
                  margin-right: 0.05rem;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
              .info {
                position: relative;
                width: 100%;
                padding-bottom: 0.26rem;
                padding-right: 0.52rem;
                color: #000;
                font-family: Arial, Avenir, sans-serif;
                img.location-icon {
                  width: 0.32rem;
                  height: 0.32rem;
                  margin-right: 0.06rem;
                }
                .on {
                  flex-shrink: 0;
                  color: #ff5934;
                  margin-right: 0.05rem;
                }
              }
            }
          }
        }
      }
      .configuration {
        display: flex;
        padding: 0;
        text-align: center;
        color: #000;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        margin-top: 0.28rem;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          width: 0 !important;
        }
        .item {
          min-width: 1.68rem;
          padding: 0.32rem 0.08rem;
          border: none;
          img {
            display: block;
            margin: 0 auto;
            width: 0.3rem;
            height: 0.3rem;
            margin-bottom: 0.04rem;
          }
          .item_name {
            padding: 0.08rem 0;
            font-size: 0.24rem !important;
          }
          .item_value {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.24rem !important;
          }
        }
      }
      .section {
        & > div {
          background: #fff;
          text-align: left;
          margin: 0 0.32rem;
        }
        .brief {
          .goods-brief {
            margin-top: 0.12rem;
            margin-bottom: 0.12rem;
            line-height: 1.5em;
            word-break: break-all;
            color: rgba(0, 0, 0, 0.54);
            overflow: hidden;
            text-overflow: ellipsis;
            display: box;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: #000;
            font-size: 0.24rem !important;
          }
        }
        .point {
          margin-top: 0.12rem;
          margin-bottom: 0.28rem !important;
          .desc {
            text-align: left;
            color: #000;
            margin-bottom: 0.16rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: box;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            font-size: 0.24rem !important;
          }
        }
      }
      .name {
        background: #fff;
        text-align: left;
        margin: 0 0.32rem;
        line-height: 1.5em;
        color: #000;
        font-weight: 700;
        font-size: 0.32rem;
        margin-top: 0.16rem;
        margin-bottom: 0.16rem;
        font-family: Avenir;
      }
      & > .product_price {
        text-align: left;
        .layout {
          background: #fff;
          margin: 0 0.32rem;
          margin-top: 0.22rem;
          color: #ff6700;
          font-size: 0.48rem;
          font-family: Avenir, Arial, sans-serif;
          font-weight: 700;
        }
        .coupon-active {
          .customize {
            background-color: rgba(255, 105, 0, 0.1);
            padding: 0.12rem 0.12rem 0.02rem;
            border-radius: 0.08rem;
            margin: 0.16rem 0.32rem;
            font-size: 0.2rem;
            position: relative;
            overflow: hidden;
            .overview-promotion-left {
              max-width: 5.2rem;
              max-height: 43px;
              overflow: hidden;
              position: relative;
              .cur-active {
                display: inline-flex;
                color: #ff6900;
                font-size: 0.2rem;
                border: 1px solid #ff6900;
                margin-left: 0.1rem;
                margin-bottom: 0.1rem;
                align-items: center;
                border-radius: 0.04rem;
                height: 17px;
              }
            }
            .more {
              position: absolute;
              right: 0.2rem;
              top: 50%;
              -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
              width: 0.8rem;
              color: #fff;
              margin-bottom: 0.08rem;
              font-size: 0.2rem;
              line-height: 0.36rem;
              background: #ff6900;
              border-radius: 0.06rem;
              text-align: center;
            }
          }
        }
      }
    }
    .details__appraise {
      .comments {
        padding: 0.1rem 0.32rem 0.36rem;
        text-align: left;
        z-index: auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        .swiper-container {
          width: 80%;
          .swiper-wrapper {
            width: 100%;
            display: flex;
            .swiper-slide {
              flex: 0 0 100%;
              .swiper_box {
                width: 5.45rem;
                height: 3.81rem;
                box-sizing: border-box;
                padding: 0.32rem;
                border: 0.016rem solid #e5e5e5;
                border-radius: 0.16rem;
                margin-right: 5px;
                .comment_header {
                  -webkit-box-align: center;
                  align-items: center;
                  display: flex;
                  -webkit-box-flex: 1;
                  flex: 1 1 auto;
                  flex-wrap: nowrap;
                  .img_box {
                    margin-right: 0.24rem;
                    width: 0.64rem;
                    height: 0.64rem;
                    overflow: hidden;
                    border-radius: 100%;
                    img {
                      width: 100%;
                    }
                  }
                  .user_info {
                    flex: 1 1 auto;
                    .name {
                      color: #000;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      width: 3.2rem;
                      font-weight: 400;
                      font-size: 0.24rem !important;
                    }
                    .comment_date {
                      margin-top: 0.06rem;
                      color: rgba(0, 0, 0, 0.3);
                      font-size: 0.2rem !important;
                    }
                  }
                }
                .comment_content {
                  text-align: justify;
                  .text {
                    margin: 0.16rem 0;
                    line-height: 1.5em;
                    height: 3em;
                    overflow: hidden;
                    position: relative;
                    color: rgba(0, 0, 0, 0.5);
                    font-size: 0.24rem;
                    font-size: 0.24rem !important;
                  }
                  .photos {
                    margin-bottom: 0.12rem;
                    .img {
                      display: inline-block;
                      width: 1.52rem;
                      height: 1.52rem;
                      margin: 0 0.1rem 0 0;
                      border-radius: 0.16rem;
                      overflow: hidden;
                      position: relative;
                      &:last-child {
                        margin-right: 0;
                      }
                      img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .comments_title {
          display: flex;
          height: 0.72rem;
          line-height: 0.72rem;
          align-items: center;
          justify-content: space-between;
          position: relative;
          .comments_title_left {
            color: #000;
            font-size: 0.28rem;
            font-weight: 700;
          }
          .comments_title_right {
            margin-left: 0.25rem;
            color: #7f7f7f;
            font-size: 0.24rem;
            .icon-xiangyou1 {
              font-size: 0.24rem;
            }
          }
        }
        .comments_tags {
          margin-top: 0.12rem;
          margin-bottom: 0.16rem;
          overflow: hidden;
          line-height: 0.2rem;
          .comments_tags_text {
            background-color: #ffeeea;
            font-size: 0.2rem;
            line-height: 0.2rem;
            padding: 0.09rem 0.16rem;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            display: inline-block;
            color: #494a4b;
            border-radius: 0.5rem;
          }
        }
      }
    }
    .detailsItems {
      .van-tabs__line {
        display: none;
      }
      .van-sticky {
        top: 44px;
        padding: 0;
      }
    }
    .details_recommend {
      .recommend_lists {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .recommend_list {
          flex: 0 0 49.5%;
          width: 49.5%;
          .list_img {
            width: 100%;
            img {
              width: 100%;
            }
          }
          .list_info {
            padding: 0.18rem 0.26rem 0.22rem;
            .list_name {
              font-size: 0.28rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .list_price {
              font-size: 0.32rem;
              color: #ff6700;
              margin-top: 0.1rem;
              del {
                font-size: 0.22rem;
                margin-left: 0.1rem;
                color: rgba(0, 0, 0, 0.54);
                text-decoration: line-through;
              }
            }
            .price {
              position: relative;
              padding-left: 0.5em;

              line-height: 1em;
            }
          }
        }
      }
      .head_mark {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
  }
  & > header {
    width: 100%;
    height: 0px;
    z-index: 81;
    display: flex;
    position: fixed;
    top: 0px;
    justify-content: space-between;
    i {
      display: inline-block;
      font-size: 0.4rem;
      padding: 8px;
      border-radius: 50%;
      color: #a1a1a1;
      margin: auto 10px;
      margin-top: 5px;
      opacity: 0.8;
    }
  }
  .custom-indicator {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: auto;
    padding: 0.1rem 0.15rem;
    border-radius: 12px;
    bottom: 6px;
    right: 6px;
    left: auto;
    font-size: 0.35rem;
  }
  .van-swipe-item {
    height: auto;
    .van-image {
      height: 100%;
    }
  }
  .van-goods-action {
    z-index: 88;
  }
}
</style>